<!DOCTYPE html>
<html lang="en">
<%
layout("/common/_body.html",{title:'GIS地图'}){
%>

<body>
<!-- 页面头部 -->
<div class="header">
    <div class="header_wrap">
        <div class="header_lt">
            <h3>武汉市森林公安大数据平台</h3>
        </div>
        <%
        layout("/common/_bar.html"){}
        %>
    </div>
</div>
<!-- 中间区域 -->
<div class="main indexBg">
    <div class="gis_wrap">
        <div class="breadcrumb"><span>主页</span><b>GIS地图</b></div>
        <div class="map_Box">
            <!--<ul class="map_list clearfix">-->
                <!--<li class="active">-->
                    <!--<div class="gcase_icont"><div class="g-icont gcase_01"></div></div>-->
                    <!--<p>辖区地图</p>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<div class="gcase_icont"><div class="g-icont gcase_02"></div></div>-->
                    <!--<p>野生动物</p>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<div class="gcase_icont"><div class="g-icont gcase_03"></div></div>-->
                    <!--<p>野生植物</p>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<div class="gcase_icont"><div class="g-icont gcase_04"></div></div>-->
                    <!--<p>植被信息</p>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<div class="gcase_icont"><div class="g-icont gcase_05"></div></div>-->
                    <!--<p>森林防火</p>-->
                <!--</li>-->
            <!--</ul>-->
            <div class="map_item">
                <div class="mapBox" id="container"></div>
            </div>
        </div>
    </div>
</div>

<!-- 页面底部 -->
<div class="footer">
    <div class="footer_wrap">武汉市森林公安局版权所有</div>
</div>

<%}%>

<link href="/static/css/ol.css" rel="stylesheet">
<script src="/static/js/ol.js"></script>

<script language="javascript">
    var map;
    function  mapInit (centerLngLat,zoom) {
        var layers = [];

        // 影像服务
        var ImageServiceUrl = "http://10.120.57.253:6080/arcgis/rest/services/WHLY/WHLY_YX/MapServer";
        var imageServers = new ol.layer.Tile({
            source: new ol.source.TileArcGISRest({
                url: ImageServiceUrl
            })
        });

        // 影像标注服务
        var imageTagServiceUrl = 'http://10.120.57.253:6080/arcgis/rest/services/WHLY/WHLY_BZ/MapServer';
        var imageTagService =new ol.layer.Tile({
            source: new ol.source.TileArcGISRest({
                url: imageTagServiceUrl
            })
        });

        // 森林资源分布
        var forestResources = new ol.layer.Tile({
            source: new ol.source.TileArcGISRest({
                url: 'http://10.120.57.253:6080/arcgis/rest/services/WHLY/WHESW_FLQH_SLLB/MapServer'
            })
        });

        layers.push(imageServers);
   layers.push(imageTagService);
   layers.push(forestResources);

        map = new ol.Map({
            target: 'container',
//            controls: ol.control.defaults().extend([
//                new ol.control.MousePosition({ projection: 'EPSG:4326' })
//            ]),
            layers: layers,
            view: new ol.View({
                center: ol.proj.fromLonLat(centerLngLat),
                zoom: zoom
            })
        });
    }

    $(function(){
        mapInit([114.204883, 30.840285],12);
        $(".map_list li").click(function(){
            $(this).addClass("active").siblings().removeClass("active")
        })
    })
</script>

</body>
</html>
